<template>
  <div class="product-main">
    <div class="navbar-div">
        <van-nav-bar
            title="商品详情"
            left-text="返回"
            left-arrow
            @click-left="onClickLeft"
        />
    </div>
    <div class="topimage-div">
        <img :src="goodsInfo.IMAGE1" width="100%"/>
    </div>
    <div class="goods-name">{{goodsInfo.NAME}}</div>
    <div class="goods-price">价格：{{goodsInfo.PRESENT_PRICE | moneyFilter}}</div>
    <div>
      <van-tabs sticky swipeable>
        <van-tab title="商品详情">
          <div class="detail" v-html="goodsInfo.DETAIL">
          </div>
        </van-tab>
        <van-tab title="评价">
            正在制作中
        </van-tab>
      </van-tabs>
    </div>
    <div class="goods-bottom">
      <div>
        <van-button size="large" type="primary">加入购物车</van-button>
      </div>
      <div>
        <van-button size="large" type="danger">直接购买</van-button>
      </div>
  </div>
  </div>
</template>

<script>
import axios from 'axios'
import { toMoney } from 'components/filter/filter'
import Url from 'components/serviceApi/serviceApi'
import { Toast } from 'vant'
export default {
  data () {
    return {
      goodsId: '',
      goodsInfo: {} // 商品详细数据
    }
  },
  created () {
    this.goodsId = this.$route.params.id
    this.getInfo()
  },
  methods: {
    getInfo () {
      console.log(this.goodsId)
      console.log(Url.getDetailGoodsInfo)
      axios({
        url: Url.getDetailGoodsInfo,
        method: 'post',
        data: {
          goodsId: this.goodsId
        }
      }).then(response => {
        if (response.data.code === 200 && response.data.message) {
          this.goodsInfo = response.data.message
        } else {
          Toast('服务器错误，数据取得失败')
        }
        console.log(this.goodsInfo)
      }).catch(error => {
        console.log(error)
      })
    },
    onClickLeft () {
      this.$router.go(-1)
    }
  },
  filters: {
    moneyFilter (money) {
      return toMoney(money)
    }
  }
}
</script>

<style scoped>
.product-main {
  padding-bottom: 65px;
}
.detail{
  font-size:0px;
}
.goods-name{
  padding: 0 .5rem;
  background-color: #fff;
}
.goods-price{
  padding: 0 .5rem;
  background-color: #fff;
}
.detail{
  font-size:0px;
}
.goods-bottom{
  position: fixed;
  bottom:0px;
  left:0px;
  background-color: #FFF;
  width:100%;
  display: flex;
  flex-direction: row;
  flex-flow: nowrap;
}
.goods-bottom > div{
  flex:1;
  padding:5px;
}
</style>
